<template>
  <div class="bg-white rounded-2xl p-5">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-bold text-gray-900">必读榜单</h3>
      <div class="flex gap-2">
        <button
          v-for="period in periods"
          :key="period.value"
          @click="handlePeriodChange(period.value)"
          :class="[
            'px-2 py-1 text-sm rounded transition-colors',
            currentTab === period.value
              ? 'bg-purple-100 text-purple-500'
              : 'text-gray-500 hover:text-gray-700',
          ]"
        >
          {{ period.label }}
        </button>
      </div>
    </div>

    <!-- 骨架屏加载效果 -->
    <template v-if="loading">
      <div v-for="i in 3" :key="i" class="mb-4">
        <a-skeleton active :paragraph="{ rows: 1 }">
          <template #title>
            <div class="flex justify-between items-center">
              <div class="h-5 w-3/4 bg-gray-200 rounded"></div>
              <div class="h-5 w-1/4 bg-gray-200 rounded"></div>
            </div>
          </template>
        </a-skeleton>
      </div>
    </template>

    <!-- 实际内容 -->
    <template v-else>
      <div v-for="(item, index) in list" :key="item.id" class="mb-4 last:mb-0">
        <router-link
          :to="{ name: 'PostDetail', params: { id: item.id } }"
          class="group flex items-start"
        >
          <span
            class="flex-none mr-3 text-lg font-medium"
            :class="[
              index === 0 ? 'text-red-500' : '',
              index === 1 ? 'text-orange-500' : '',
              index === 2 ? 'text-yellow-500' : '',
              index > 2 ? 'text-gray-400' : '',
            ]"
          >
            {{ index + 1 }}
          </span>
          <div class="flex-1 min-w-0">
            <h4
              class="text-gray-900 text-sm font-medium mb-1 truncate group-hover:text-purple-500 transition-colors"
            >
              {{ item.title }}
            </h4>
            <div class="flex items-center text-xs text-gray-500 space-x-2">
              <span>{{ item.thumbNum }} 赞</span>
              <span>{{ item.replyNum }} 评论</span>
              <span>{{ item.favourNum }} 收藏</span>
            </div>
          </div>
        </router-link>
      </div>
    </template>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const periods = [
  { label: "日榜", value: "day" },
  { label: "周榜", value: "week" },
  { label: "月榜", value: "month" },
];

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  currentTab: {
    type: String,
    default: "day",
  },
});

const emit = defineEmits(["timeRangeChange"]);

const handlePeriodChange = (period) => {
  emit("timeRangeChange", period);
};
</script>
